<template>
<div>
  <div class="background">
    <img src="../login/login.jpg" width="100%" height="100%" alt="" />
  </div>
  <div class="front">
    <div style="margin-left: 90%;">
      <el-dropdown>
        <el-button plain type="primary" style="margin-top: 2%;color: black">
          切换用户<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginmanager()">管理员</el-dropdown-item>
          <el-dropdown-item @click.native="logint()">租客</el-dropdown-item>
          <el-dropdown-item @click.native="longhouse()">房主</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <body id="poster">
    <el-form class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">管理员登录</h3>
      <el-form-item>
        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>

      <el-form-item>
        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
      </el-form-item>
    </el-form>
    </body>
  </div>
</div>
</template>


<script>
  export default {
    name: "Login",
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      logint(){
        this.$router.replace({ path: "/tenantLogin" });
      },
      longhouse(){

        this.$router.replace({ path: "/loginHouseOwner" });
      },
      loginerror() {
        this.$message.error('账号或密码错误');
      },
      login() {
        let postData=this.$qs.stringify({
          username: this.loginForm.username,
          password: this.loginForm.password
        })
        this.$axios
          .post('/manager/login',postData)
          .then(successResponse => {

            if(successResponse.data==="管理员"){
              this.$router.replace({ path: "/manager" });
            }
            else{
                  this.loginerror();
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

<style>
  #poster {
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid blue;
    box-shadow: 0 0 25px black;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-0.5;
    position: absolute;
  }

  .front{
    z-index:0.1;
  }

</style>
